<template>
<div>
  <div class="pad_20_0">
    <div style="background-color: #f2f2f2">
      <div class="jz pad_15_0" style="width: 1200px;min-width: 1200px">
        <span class="fz_30" style="color: #cf1500">图说</span>
        <span class="fz_24 mag_l-10">关注、解读正在发生的事儿</span>
      </div>
    </div>
    <div class="jz" style="min-width: 1200px;width: 1200px">
      <div class="bor_1_hui pad_20_0 mag_t-20">
          <div class="wh_9 jz">
            <div class="fz_20 mag_10_0">{{itemList.title}}</div>
            <div style="color: #666666;">
              <span>来源：{{itemList.name}}</span>
              <span class="mag_l-10">作者：{{itemList.author}}</span>
              <span class="mag_l-10 wz_hui">{{itemList.updatetime |date }}</span>
            </div>
          </div>
        <div class="wh_7 jz img_100 mag_t-20" v-if="itemList.images">
          <img height="470" :src="$store.state.imageUrltitle+itemList.images[this.imgindex]" alt="">
        </div>
        <div class="ddisp wz_jz mag_t-20">
          <div @click="imgadd(1)" class="centerdq xsgb">
            <img src="../../assets/img/left1.jpg" height="76" width="24"/>
          </div>
          <div class="centerdq wh_7">
            <ul class="ul">
              <li v-for="(item,index) in itemList.images" :key="index">
                <div class="disp xsgb" style="width: 120px">
                  <img @click="cdd(index)" class="jz" width="110" :src="$store.state.imageUrltitle+item" alt="">
                </div>
              </li>
            </ul>
          </div>
          <div @click="imgadd(2)" class="centerdq xsgb">
            <img src="../../assets/img/right1.jpg" height="76" width="24"/>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<script>
import { getplayidApi } from "@/api/api";
export default {
  name: "imageList",
  data(){
    return{
      // itemList:this.$route.query.itemList,
      itemList:[],
      imgindex:0,
      eid:this.$route.query.eid
    }
  },
  created() {
    this.add()
  },
  methods:{
    add(){
      console.log(this.eid)
      let params = {
        aid:this.eid
      };
      getplayidApi(params).then(res => {
        if (res.status==200) {
          res.data.images = res.data.images.split(",")
          this.itemList = res.data
          // this.itemList = res.data.map((item)=>{
          //   return {...item,images:item.images.split(",")}
          // })
        } else {
          // console.log(res.msg)
        }
      });
    },
    cdd(e){
      this.imgindex=e
    },
    imgadd(e) {
      if (e==1){
        if (this.imgindex>0){
          this.imgindex-=1
        }
      }else if(e==2){
        if (this.imgindex<this.itemList.images.length-1){
          console.log(this.itemList.images.length)
          console.log(this.imgindex)
          this.imgindex+=1
        }
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>